<template>
  <div class="height100 ls-abs-outer">
    <div class="ls-text-halfLine" v-for="item in showInListRouters" :key="item.path">
      <router-link :to="{
        path:item.path,
        query:item.meta?.query ?? {},
        params:item.meta?.params ?? {}
      }">
        {{ item.name }}
      </router-link>
    </div>
    <div class="copyButton">
      <el-button @click="copyRouters">复制路由</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed} from 'vue';
import {routes} from './router';
import {docCopyText} from 'ls-base-lib';
import {ElMessage} from 'element-plus';

const showInListRouters = computed(() => routes.filter(x => (x.meta == null) || (x.meta.showInList === true || x.meta.showInList === undefined)));

function copyRouters(): void {
  if (docCopyText(showInListRouters.value.map(x => `${x.name as string}："${x.path}"`).join('\r\n')))
    ElMessage.success('路由已复制');
}
</script>

<style scoped>
.copyButton {
  position: absolute;
  right: 0.5em;
  bottom: 0.5em;
}
</style>
